<template>
	<view class="page" @touchmove.stop.prevent="moveHandle">
		<view class="top">
			<image src="/static/img/logo.png" class="user"></image>
			<text class="cloud">云盟商桥</text>
			<text class="login">注册</text>
			<view class="tel">
				<input type="number"  @input="inputPhone" @click="hideTabbar" @focus="hideTabbar" placeholder="请填写手机号码" />
			</view>
			<view class="checked">
				<input type="number" @input="inputCode" @click="hideTabbar" @focus="hideTabbar" placeholder="请填写验证码" />
				<text @click="toCode" v-if="show">获取验证码</text>
				<text v-if="!show">{{count}}秒后重新发送</text>
			</view>
			<view class="agreement-wrap">
				<view class="circle" @click="isChecked">
					<view class="check" v-if="isSelected"></view>
				</view>
				<text class="agreement">勾选同意</text>
				<view class="agreement" @click="getService();">
					<text style="color: #ff7e00; text-decoration: underline;">“云盟商桥”用户服务协议</text>
				</view>
			</view>
			
		</view>
		<view class="login-now" v-if="isSelected" @click="toRegister">
			<image src="/static/img/login.png"></image>
			<text>立即注册</text>
			
		</view>
		<view class="login-now" v-if="!isSelected" @click="toRegister">
			<image src="/static/img/register.png"></image>
			<text >立即注册</text>
			
		</view>
		<text class="register" @click="toLogin">去登录</text>
		<text class="register" @click="toNregister">暂不注册</text>
		<view class="bottom-img" v-if="tabbar">
			<image src="/static/img/login-bottom.png"></image>
		</view>
		
	</view>
</template>
 <script src="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.4/mobile-detect.min.js"></script>
<script>
	export default {
		//页面加载执行 获取前页传过来的参数
		onLoad: function(options) {
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
			//分享参数头url
			let url = this.$api.headurl
			this.$hshare.gethShareParam(url+'/#/pages/register/Register')
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
			
			
			//获取用户缓存信息
			this.token =options.token;
			//app是否注册过 显示i悬浮图标的状态
			this.ish5 =options.ish5;
			this.member= options;
		
			if(this.member != '' && this.member != null && typeof(this.member) != 'undefined'&&this.member != undefined && JSON.stringify(this.member) != "{}"){
				//存token
				uni.setStorage({
					key: "token",
					data: this.token
				})
				//存 是否注册过app 的状态  1 没有 2 注册过
				uni.setStorage({
					key: "isapp",
					data: this.ish5
				})
				//用户昵称
				uni.setStorage({
					key: "member",
					data: this.member
				})
			}
			this.getSignParam();
			
			
			
			
			
			
			//解决注册页底部图片被顶起
			uni.getSystemInfo({
				success: (res)=> {
					this.windowHeight = res.windowHeight;
				}
			});    
			uni.onWindowResize((res) => {
				if(res.size.windowHeight < this.windowHeight){
					this.tabbar = false
				}else{
					this.tabbar = true
				}
			})
			
		},
		
		//赋值 即可 直接用  不赋值 直接写  this.a 也可以
		data() {
			return {
					isSelected: false,
					getmemberInfo:'',
					count:'',
					show: true,
					token:'',
					canBack:false,
					paramslon:[],
					client_id:'',
					province:'',
					city:'',
					area:'',
					lon:'',
					lat:'',
					tabbar:true,
					windowHeight: '',
					
			}
		},
		
		//跳转页面  调用接口
		methods: {
			moveHandle() {
					return;
			},
		   hideTabbar(){
				this.tabbar = false;
			},
			//请求分享参数签名
			getSignParam(){
				console.log('22222222222222222222222222222222')
				var that = this
				let shareurl = this.$api.headurl
				this.$api.getShareParam({url:shareurl+'/#/pages/register/Register'}).then(res => {
					console.log(res)
					if(res.data.status == true){
							console.log(res.data)
							// t.shareParam = res.data.data
							that.$jweixin.config({
								debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
								appId:res.data.data.appId, // 必填，公众号的唯一标识
								timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
								nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
								signature: res.data.data.signature,// 必填，签名
								
								jsApiList: ["getLocation"] ,// 必填，需要使用的JS接口列表
							
							
							/* 即将废弃	jsApiList: ["onMenuShareAppMessage","onMenuShareTimeline"] // 必填，需要使用的JS接口列表 */
							})
							that.$jweixin.ready(function(){
							    // TODO  
								that.$jweixin.getLocation({
								    type: 'wgs84',
								    success: function (res) {
										that.lon = res.longitude
										that.lat = res.latitude
										/* var speed = res.speed; // 速度，以米/每秒计
										var accuracy = res.accuracy; // 位置精度 */
								    }
								});
							});
					
					}
					
				})
				
		
				
			},
			//是否选择 协议
			isChecked() {
				this.isSelected = !this.isSelected;
			},
			//跳转登录
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/Login'
				})
			},
			//注册
			toRegister() {
				let _memberInfo = uni.getStorageSync("member")
			
			    // 获取手机类型结束 
		
				if(	this.isSelected == true){
					this.$api.getRegister({
						phone:this.phone,
						verify:this.code,
						ish5:1,
						openId:_memberInfo.openid,
						unionId:_memberInfo.unionid,
						name:_memberInfo.nickName,
						headpic:_memberInfo.avatarUrl,
						lon:this.lon,
						lat:this.lat,
				
					}).then(res => {
						console.log(res);
						if(res.data.status == true){
							//成功提示信息
							 uni.showToast({
							    title:res.data.msg ,
								
							 }),
							
							//获取昵称 头像 token  用户信息 存到缓存
							uni.setStorage({
								key: "member",
								data: res.data.data,
							})
							 
							//注册成功的状态  2
							uni.setStorage({
							 	key: "memberLoginStatus",
								data: 2,
							})
							//获取token  把token 存到缓存
							uni.setStorage({
								key: "token",
								data: res.data.data.token,
								success() {
									this.canBack = true
								
									setTimeout(function(){
										console.log(document.referrer,'---------------------------注册返回上一页')
										// window.history.go(-1); 
										//跳转到首页
										var pages = getCurrentPages(); // 当前页面
										var beforePage = pages[pages.length - 2]; // 前一个页面
										console.log(pages,'当前页',beforePage,'前一个页面')
										var _count = 0
										var  _length = 0
									
										for (let i = pages.length-1; i >= 0; i--) {
											console.log(pages[i].route,'—————————————————这个也得路径 注册———————————————————————————')
											if(pages[i].route!="pages/login/Login"&&pages[i].route!="pages/register/Register"){
												console.log(_count,'是否进来','-'._count)
												console.log(pages.length,'长度2')
												console.log(_count-pages.length,'最种长度')
											
												var _length =-_count
												
											}else{
												_count++
												_length--
											}
											
										}
										console.log(_length,'——————————最终长度')
										window.history.go(_length);
										
										
									},1000)
									
								}
							})
						}
					})
				}else{
					uni.showToast({
					   title:'请勾选协议' ,
												
					})
				}
			
			},
			//获取验证码
			toCode() {
				this.$api.getCode({phone:this.phone,mark:'register'}).then(res => {
					if(res.data.status == true){
						 uni.showToast({
						    title:res.data.msg 
						 })
						const time_count = 60;
						if (!this.timer) {
							this.count = time_count;
							this.show = false;
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= time_count) {
									this.count--;
								} else {
									this.show = true;
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}
						console.log(res);
					}else{
						uni.showToast({
						   title:'发送失败'
						})
					}
				})
			},
			//实时获取输入的验证码
			inputCode: function(event) {  
				this.code = event.target.value
			},
			//实时获取输入的手机号
			inputPhone: function(event) {
				this.phone = event.target.value  
			}, 
			// 用户服务协议
			getService() {
				uni.navigateTo({
					url: '/pages/my/Agreement'
				})
			},
			//暂不注册
			toNregister(){
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			onBackPress(options) {
			    // 这里可以自定义返回逻辑，比如下面跳转其他页面
			   if(this.canBack == false){
				   // return true 表示禁止默认返回
				   return true;
			   }else{
				   return false;
			   }
			},
		},
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100vh;
		/* position: relative; */
	}
	.top {
		width: 750rpx;
		height: 848rpx;
	}
	.user {
		width: 162rpx;
		height: 162rpx;
		margin-left: 294rpx;
		margin-top: 242rpx;
	}
	.cloud {
		text-align: center;
		display: block;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51,51,51,1);
	}
	.login {
		display: block;
		margin-left: 339rpx;
		margin-top: 45rpx;
	}
	.tel {
		width: 630rpx;
		height: 109rpx;
		line-height: 109rpx;
		margin-left: 60rpx;
		margin-top: 45rpx;
		border-bottom: 1rpx solid #999;
		z-index: 100;
	}
	.tel input {
		padding-left: 30rpx;
		width: 100%;
		height: 100%;
	}
	.checked {
		position: relative;
		width: 630rpx;
		height: 108rpx;
		margin-left: 60rpx;
		border-bottom: 1rpx solid #999;
		z-index: 100;
	}
	.checked input {
		padding-left: 30rpx;
		width: 100%;
		height: 100%;
	}
	.checked text {
		position: absolute;
		right: 0;
		top: 45rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: rgba(254,177,71,1);
	}
	.login-now {
		position: relative;
		z-index: 10;
		width: 386rpx;
		height: 76rpx;
		line-height: 76rpx;
		margin-left: 182rpx;
		margin-top: 160rpx;
	}
	.login-now image {
		width: 386rpx;
		height: 76rpx;
	}
	.login-now text {
		position: absolute;
		left: 126rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,1);
	}
	.bottom-img {
		position: absolute;
		/* bottom: 0; */
		top:calc(100vh - 630rpx);
		width: 750rpx;
		height: 630rpx;
		z-index: 1;
	}
	.bottom-img image {
		width: 750rpx;
		height: 630rpx;
	}
	/* .register {
		position: relative;
		z-index: 100;
		display: block;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: #000;
		margin-left: 323rpx;
		margin-top: 63rpx;
	} */
	.register {
		position: relative;
		width: 100%;
		height: 40rpx;
		display: block;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: #ff7e00;
		text-align: center;
		z-index: 100;
		line-height: 40rpx;
		margin-top: 63rpx;
	}
	.agreement-wrap {
		position: relative;
		z-index: 100;
		display: flex;
		align-items: center;
	}
	.agreement {
		display: flex;
		margin-left: 20rpx;
		margin-top: 60rpx;
	}
	.agreement {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102,102,102,1);
	}
	.circle {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid rgba(204,204,204,1);
		border-radius: 50%;
		margin-left: 90rpx;
		margin-top: 60rpx;
	}
	.check {
		width: 22rpx;
		height: 22rpx;
		background: rgba(254,177,71,1);
		border-radius: 50%;
	}
	
</style>

